Greptile Summary

This PR fixes a close-animation flicker on modals by appending data-closed:fill-mode-forwards to the Tailwind class strings of every animated dialog element. The animation-fill-mode: forwards rule holds the animation's final keyframe (opacity 0, scale 95%) in place until JS actually unmounts the element, preventing a brief flash back to the visible state during busy renders.

• modal-renderer.tsx: adds fill-mode-forwards to the custom DialogPrimitive.Popup used by the shared modal renderer.
• dialog.tsx: adds fill-mode-forwards to both the DialogPrimitive.Backdrop overlay and the DialogPrimitive.Popup used by the DialogContent wrapper component.

Confidence Score: 5/5

Safe to merge — the change is a one-line addition per element that only activates during the exit animation path.

The fix is narrow and well-understood: animation-fill-mode: forwards is scoped to the data-closed state, so it cannot affect the open animation or any other rendering path. The same utility is applied consistently across all three animated elements (backdrop, modal-renderer popup, dialog popup), so there are no asymmetric cases that could introduce new flicker. No logic, data flow, or API surface is changed.

No files require special attention.

Sequence Diagram

sequenceDiagram
    participant User
    participant MobX as MobX Store
    participant React as React/JS
    participant CSS as CSS Animation

    User->>MobX: Close modal
    MobX->>React: "modalStore.isOpen = false"
    React->>CSS: Sets data-closed attribute
    CSS->>CSS: Plays fade-out + zoom-out animation (100ms)
    Note over CSS: BEFORE fix: animation ends, element reverts to visible state while React schedules unmount
    Note over CSS: AFTER fix: fill-mode-forwards holds final frame (opacity:0, scale:0.95) until unmount
    React->>React: Schedules unmount (async, may be delayed by busy renders)
    React->>CSS: Removes element from DOM

_{Reviews (1): Last reviewed commit: "fix(modal): prevent close animation flic..." | Re-trigger Greptile}